import React from 'react';
import { Outlet, Link, NavLink, useLocation, useSearchParams } from 'react-router-dom';
import Style from "./../css/Home.module.css"
const HomeViews = () => {
  const location = useLocation()
  const [search, setSearch] = useSearchParams()
  let id = search.get('id')
  console.log(id);
  console.log(location);
  /* {
      "pathname": "/home",
      "search": "",
      "hash": "",
      "state": {
          "username": "wqw"
      },
      "key": "t4u6zbbb"
  } */

  const activeStyle = ({ isActive }) => {
    return { backgroundColor: isActive ? 'red' : 'green' }
  }
  return (
    <div>
      <h1>home 组件</h1>
      <div>
        <div className={Style.leftBox}>
          <menu>
            <ul>
              <li>
                <Link to="/home/qxgl">权限管理</Link>
              </li>
              <li>
                {/* 自动拼接上一级得URL， 变成 /home/jsgl?id=123 */}
                {/* <Link to="jsgl?id=123">角色管理</Link> */}
                <Link to={{ pathname: 'jsgl', search: '?id=1000' }} state={{ username: 'wqww' }}>角色管理</Link>
              </li>
              <li>
                <Link to="/home/yhgl/123">用户管理</Link>
              </li>
              <li>4</li>
              <li>5</li>
            </ul>
          </menu>
          <menu>
            <ul>
              <li>
                <NavLink to={{ pathname: 'jsgl', search: '?id=1001' }} state={{ username: 'wqw' }} style={
                  // 在callback中，参数默认包括是一个包括isActive属性得对象
                  // 在激活这个导航时，isActive就为true,失活时为false.
                  ({ isActive }) => {
                    return { backgroundColor: isActive ? 'red' : 'green' }
                  }
                }>角色管理</NavLink>
              </li>
              <li>
                <NavLink to={{ pathname: 'yhgl' }} style={activeStyle}>用户管理</NavLink>
              </li>
              <li>
                <NavLink to={{ pathname: 'qxgl' }} style={activeStyle}>权限管理</NavLink>
              </li>
              <li>
                <NavLink to={{ pathname: 'qxgl' }} className={({ isActive }) => isActive ? Style.activeMenu : Style.defaultMenu}>权限管理</NavLink>
              </li>
            </ul>
          </menu>
        </div>
        <div className={Style.rightBox}>
          {/* 子路由输出 */}
          <Outlet></Outlet>
        </div>
      </div>

    </div >
  );
}

export default HomeViews;
